<!-- 用于考试界面，左侧信息栏，展示用户头像和考试题目目录 -->
<template>
  <div class="flex as-vertical y-center pb-6">
    <div id="123" class="mb-4 mt-5">
      <img src="@/assets/logo_long.png" width="120px">
    </div>

    <div shadow="hover" class="info-wrapper">
      <!-- 头像 -->
      <text-avatar :name="userName" size="medium" />
      <div class="mb-5 flex as-vertical y-center">{{ userName }}</div>

      <!-- 题目目录 -->
      <!-- 单选 -->
      <h3 v-if="singleQuestions.length !== 0">单选题</h3>
      <div class="my-3 qlist-wrapper">
        <el-button
          v-for="(item, index) in singleQuestions"
          :id="'circle' + item.id"
          :ref="'circle' + item.id"
          :key="index"
          class="qlist-item"
          :class="'unselected'"
          circle
          @click="scrollTo(item.id)"
        >
          {{ index + 1 }}
        </el-button>
      </div>

      <!-- 多选 -->
      <h3 v-if="multipleQuestions.length !== 0">多选题</h3>
      <div class="my-3 qlist-wrapper">
        <el-button
          v-for="(item, index) in multipleQuestions"
          :id="'circle' + item.id"
          :key="index"
          class="qlist-item"
          :class="'unselected'"
          circle
          @click="scrollTo(item.id)"
        >
          {{ index + 1 }}
        </el-button>
      </div>

      <el-row class="flex as-vertical my-4">
        <el-button class="px-3" round @click="savePaper">暂存</el-button>
      </el-row>

      <el-row class="flex as-vertical my-4">
        <el-button
          class="px-3"
          round
          type="primary"
          @click="submitPaper"
        >交卷</el-button>
      </el-row>

      <el-row v-if="endTime !== 0" class="flex x-center y-center my-6">
        剩余时间：{{ hideTime ? '**:**:**' : timeRemain }}
        <el-button
          class="ml-3"
          icon="el-icon-fa fa-eye"
          circle
          size="mini"
          @click="hideTime = !hideTime"
        />
      </el-row>

      <div class="py-3" />
    </div>
    <div class="py-3" />
  </div>
</template>

<script>
import variables from '@/styles/variables.scss'
import TextAvatar from '@/components/TextAvatar.vue'
const examApi = require('@/api/exam')
const examUtils = require('@/utils/exam-utils')
import dayjs from 'dayjs'
import duration from 'dayjs/plugin/duration'
dayjs.extend(duration)
dayjs.locale('zh-cn')

export default {
  components: {
    TextAvatar
  },
  props: {
    examId: {
      type: Number,
      require: true,
      default: 0
    },
    // 题目列表单选题
    singleQuestions: {
      type: Array,
      require: true,
      default: () => []
    },
    // 题目列表多选题
    multipleQuestions: {
      type: Array,
      require: true,
      default: () => []
    },
    mode: {
      type: String,
      require: true,
      default: 'exam' // review, exercise
    },
    endTime: {
      type: Number,
      require: true,
      default: 0
    }
  },
  data() {
    return {
      userName: this.$store.state.user.userName,
      timeRemain: 0,
      hideTime: false
    }
  },
  variables() {
    return variables
  },
  mounted() {
    console.log(dayjs().valueOf())
    console.log(this.endTime)
    setInterval(() => {
      const diffTime = dayjs.duration(this.endTime - dayjs().valueOf())
      const hours = this.prefixInteger(diffTime.hours(), 2) // 小时
      const minutes = this.prefixInteger(diffTime.minutes(), 2) // 分钟
      const seconds = this.prefixInteger(diffTime.seconds(), 2) // 秒
      this.timeRemain = `${hours}:${minutes}:${seconds}`
    }, 1000)
  },
  methods: {
    scrollTo(id) {
      const q = document.getElementById('question' + id)
      if (q) {
        console.log(q)
        console.log('定位到题目id：', id)
        q.scrollIntoView({
          behavior: 'smooth'
        })
      }
    },

    prefixInteger(num, n) {
      return (Array(n).join(0) + num).slice(-n)
    },

    savePaper() {
      this.$message('已保存作答记录。')
    },

    submitPaper() {
      this.$loading()
      console.log('SAVING')
      this.$confirm('确定提交试卷吗？', '', {
        confirmButtonText: '提交',
        type: 'warning'
      })
        .then(() => {
          this.finalSubmitPaper()
        })
        .catch(() => {
          this.$loading().close()
        })
    },

    finalSubmitPaper() {
      this.$loading()
      examUtils
        .getAnswerJSONByExamId(this.examId)
        .then(ans => {
          const data = {
            examId: this.examId,
            answers: ans
          }
          console.log(data)
          examApi
            .submitPaper(data)
            .then(res => {
              this.$notify.success('提交成功')
              this.$router.push('/')
              this.$loading().close()
            })
            .catch(() => this.$loading().close())
        })
        .catch(err => {
          this.$message.warning(err)
          this.$loading().close()
        })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';

.info-wrapper {
  padding: 20px 30px;
  // background-color: #f8f8f8;
  border-radius: 8px;
}

.qlist-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
  width: 260px;
}

.qlist-item {
  width: 40px;
  height: 40px;
  margin: 5px;
}
.selected {
  background-color: $primaryColor;
  border: 0px solid white;
  color: white;
}

.unselected {
  background-color: white;
  color: black;
}
</style>
